import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Image,
  Text,
  ScrollView,
  TouchableOpacity
} from 'react-native'

import NavBar from '../../../../../components/PublicHeader';
import getStorageValue from '../../../../../utils/getStorageValue';
import fetchWebApi from '../../../../../public/WebApi/fetchBase';
import Layer from '../../../../../utils/Layer';

import {
  Constant
} from '../../../../../public/js/constant';
import {
  DELETE_APPCARD
} from '../../../../../public/WebApi/myInfoDataInterface/userInfoListApi';

export default class bankCardManagement extends Component {
  constructor(props) {
    super(props)
    const {
      id,
      nameofBankCard,
      bankCardType,
      tificationNumber,
    } = this.props.navigation.state.params
    this.state = {
      topTitle: "银行卡管理",
      headerRightImage: require("../../../../../assets/images/headerIcon/shareBtn.png"),
      copyButtonIcon: require("../../../../../assets/images/iconResources/copyButtonIcon.png"),

      nameofBankCard: nameofBankCard,
      bankCardType: bankCardType,
      tificationNumber: tificationNumber,
      id: id,
      // 银行卡信息列表
      bankManagementCard: [
        {
          bankCardLogIcon: require("../../../../../assets/images/iconResources/bankCardLogIcon.png"),
          nameofBankCard: "中国建设银行",
          bankCardBumber: "**** **** **** 1266",
          bankCardType: "储蓄卡",
        },
      ],
      bankCardInformation: [
        {
          title: "卡号",
          bankCardSubBranch: "**** **** **** 1266",
          copyButtonIcon: require("../../../../../assets/images/iconResources/copyButtonIcon.png"),
        },
        {
          title: "支行",
          bankCardSubBranch: "湖南麓谷路支行",
          copyButtonIcon: require("../../../../../assets/images/iconResources/copyButtonIcon.png"),
        }
      ],
    };
  }

  componentDidMount = () => {
  }

  //删除银行卡
  async DeleteAppcard() {
    const {
      id
    } = this.state
    const res = await fetchWebApi(DELETE_APPCARD,
      {
        token: await getStorageValue(Constant.TOKEN),
        id: id
      }, 'DELETE')
    if (res.status == 200) {
      Layer.showMsg('删除成功')
      this.props.navigation.push('myCardBag')
      this.props.navigation.goBack()
    }
  }

  render() {
    const {
      tificationNumber,
      headerRightImage,
      copyButtonIcon,
      topTitle
    } = this.state
    // 银行卡展示区
    const bankManagementCard =
      <>
        {this.state.bankManagementCard.map((item, index) => (
          <View style={styles.bankCardManagement}
            key={index}>
            <View style={styles.bankCardCardBox} >
              <Image
                style={styles.bankCardLogIcon}
                source={item.bankCardLogIcon}
              />
              <View>
                <Text style={styles.nameofBankCard}>
                  {this.state.nameofBankCard}
                </Text>
                <Text style={styles.bankCardBumber}>
                  {this.state.tificationNumber}
                </Text>
              </View>
            </View>
            <Text style={styles.bankCardType}>
              {this.state.bankCardType}
            </Text>
          </View>
        ))}
      </>
    // 银行卡详情区
    const bankCardInformation =
      <>
        <View style={styles.bankCardInformation} >
          <Text style={styles.title}>卡号</Text>
          <View style={styles.row}>
            <Text style={styles.bankCardBumber}>
              {tificationNumber}
            </Text>
            <Image
              source={copyButtonIcon}
            />
          </View>
        </View>
        <View style={styles.bankCardInformation}>
          <Text style={styles.title}>支行</Text>
          <View style={styles.row}>
            <Text style={styles.bankCardBumber}>湖南麓谷路支行</Text>
            <Image
              source={copyButtonIcon}
            />
          </View>
        </View>
      </>
    {/* 按钮解除绑定 */ }
    const unbind =
      <>
        <TouchableOpacity
          onPress={() => {
            this.DeleteAppcard()
          }} style={styles.unbind}>
          <Text style={styles.unbindText}>解除绑定</Text>
        </TouchableOpacity>
      </>
    return (
      <View style={styles.padlrWarper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          rightImage={headerRightImage}
          title={topTitle}
          titleColor={"#333"}
        />
        <ScrollView>
          <View style={styles.padlr}>
            {/* 银行卡展示区 */}
            {bankManagementCard}
            {/* 银行卡详情区 */}
            {bankCardInformation}
            {/* 解除绑定按钮 */}
            {unbind}
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  padlrWarper: {
    backgroundColor: "rgb(245,245,245)",
    flex: 1,
  },
  padlr: {
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 10,
  },


  bankCardManagement: {
    marginTop: 10,
    marginBottom: 10,
    width: "100%",
    height: 80,
    paddingLeft: 10,
    paddingRight: 10,
    borderRadius: 10,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "#fff",

  },

  bankCardCardBox: {
    height: "100%",
    paddingTop: 20,
    flexDirection: "row",
  },
  bankCardLogIcon: {
    marginRight: 15
  },
  nameofBankCard: {
    color: "#333",
    fontSize: 17,
    marginBottom: 5
  },
  bankCardBumber: {
    color: "#8d8d8d",
    marginRight: 10,
    fontSize: 13
  },
  bankCardType: {
    color: "#afafaf",
    fontSize: 13
  },
  bankCardInformation: {
    width: "100%",
    height: 50,
    borderRadius: 5,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: "#fff",
    borderBottomWidth: 1,
    borderBottomColor: "rgb(250,250,250)",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  row: {
    flexDirection: "row",
  },
  title: {
    color: "#333",
    fontSize: 16
  },
  unbind: {
    width: "100%",
    height: 40,
    marginTop: 15,
    backgroundColor: "#fff",
    borderRadius: 10,
    justifyContent: "center",
    alignItems: "center",

  },
  unbindText: {
    color: "#333",
    fontSize: 16
  },
})